<!DOCTYPE html>
<html lang="en" style="">
<head>
<!--shared:custom-meta-->
<base href="">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
/*vfs[]:/css/highlight.css*/
</style>
<script>
let DEBUG = false
DEBUG = true /*debug*/
</script>
<style>
/*file:css/app.css */
/*vfs[]:/css/ui.css*/
/*file:custom.css */
</style>
<!--shared:custom-head-->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.6.3/dist/es-module-shims.js"></script><!--safari-->
<script type="importmap">
{
    "imports": {
        "vue": "../js/vue.mjs",  
        "@servicestack/vue": "../js/servicestack-vue.mjs",
        "@servicestack/client": "../js/servicestack-client.mjs",
        "core": "../js/core.mjs",
        "app": "./lib/app.mjs",
        "dtos": "./lib/dtos.mjs"
    }
}
</script>
</head>
<body class="loading noauth">
<!--shared:custom-body-->

<div class="when-loading"></div>

<div id="app"></div>

<template id="app-template">
<div class="flex">
    <sidebar v-if="showSidebar" @hide="showSidebar=false"></sidebar>
    <div class="md:pl-sidebar md:w-sidebar overflow-auto flex flex-col flex-1">
        <div class="sticky top-0 z-10 md:hidden pl-1 pt-1 sm:pl-3 sm:pt-3 bg-white">
            <button type="button" @click="showSidebar=true"
                    class="-ml-0.5 -mt-0.5 h-12 w-12 inline-flex items-center justify-center rounded-md text-gray-500 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                <span class="sr-only">Open sidebar</span>
                <!---: Heroicon name: outline/menu -->
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
            </button>
        </div>
        <main class="flex-1 overflow-auto">
            <div class="pt-2.5 pb-6">
                <div class="absolute top-1 right-2 flex">
                    <div v-if="routes.uiHref()" class="flex items-center">
                        <a title="View in API Explorer" :href="routes.uiHref({ tab:'details' })"
                           class="p-1 inline-flex items-center border border-transparent hover:border-gray-600 hover:shadow-sm text-sm rounded bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 32"><g fill="currentColor"><path d="M27.464 2.314a.501.501 0 0 0-.698-.257L14.86 8.339a.499.499 0 0 0-.233.621l.245.641l-6.873 3.769a.5.5 0 0 0-.222.63l.228.549l-7.299 3.488a.5.5 0 0 0-.246.643l1.498 3.61a.5.5 0 0 0 .629.28l7.625-2.701l.228.549a.5.5 0 0 0 .601.289l7.276-2.097l.218.569a.497.497 0 0 0 .612.299l13-4a.498.498 0 0 0 .317-.663l-5-12.501zM2.7 21.469l-1.134-2.734l6.823-3.261l1.439 3.47L2.7 21.469zm8.491-1.846l-.238-.574l-1.843-4.445l-.238-.573l6.336-3.475l2.374 6.134l.375.981l-6.766 1.952zm8.109-1.238l-.203-.531c-.003-.011-.001-.024-.006-.035l-.618-1.597l-2.754-7.206l11.023-5.815l4.592 11.48L19.3 18.385z"/><path d="M28.964.314a.5.5 0 0 0-.929.371l6 15a.502.502 0 0 0 .651.279a.501.501 0 0 0 .279-.65l-6.001-15z"/><path d="M18 21h-3c-1.14 0-2 .86-2 2v1.315l-5.879 6.859a.5.5 0 1 0 .758.651L13.73 25H16v6.5a.5.5 0 0 0 1 0V25h2.27l5.85 6.825a.497.497 0 0 0 .705.054a.5.5 0 0 0 .054-.705L20 24.315v-1.24C20 21.912 19.122 21 18 21zm1 3h-5v-1c0-.589.411-1 1-1h3c.57 0 1 .462 1 1.075V24z"/></g></svg>
                        </a>
                    </div>
                    <auth-nav v-if="store.plugins.auth" :auth="store.auth" :logout="store.logout"></auth-nav>
                </div>
                <div v-if="store.op">
                    <div>
                        <div class="w-full md:w-sidebar border-b border-gray-200 bg-white flex">
                            <h1 class="flex max-w-screen-sm lg:max-w-screen-md py-2.5 px-4 text-2xl" aria-label="Tabs" :title="store.opName">
                                {{store.opDesc}}
                            </h1>
                        </div>
                        <div class="pt-2 sm:mx-2 lg:mx-4">
                            <component v-if="store.pageComponentFor(store.opDataModel)" :key="`${store.opDataModel}Grid`" :is="store.pageComponentFor(store.opDataModel)" :type="store.opDataModel"></component>
                            <auto-query-grid v-else :key="store.opDataModel" ref="grid" :type="store.opDataModel">
                                <template #formfooter="{ form, type, apis, model, id }">
                                    <audit-events v-if="form === 'edit' && canAccessCrudEvents" class="mt-4" :key="id" :type="type" :id="id"></audit-events>
                                </template>
                                <template v-if="app.component(`New${store.opDataModel}`)" #createform="{ type, configure, done, save }">
                                    <component :is="app.component(`New${store.opDataModel}`)" :type="type" :configure="configure" @save="save" @done="done" />
                                </template>
                                <template v-if="app.component(`Edit${store.opDataModel}`)" #editform="{ model, type, deleteType, configure, done, save }">
                                    <component :is="app.component(`Edit${store.opDataModel}`)" :model="model" :type="type" :deleteType="deleteType" 
                                               :configure="configure" @save="save" @done="done" />
                                </template>
                            </auto-query-grid>
                        </div>
                    </div>
                </div>
                <welcome v-else class="fixed w-body md:w-body top-top-nav h-top-nav overflow-auto"></welcome>
            </div>
        </main>
    </div>
</div>
</template>

<script>
function loadAuth(auth) {
    window.AUTH = !auth || auth.responseStatus ? null : auth
}
/*gateway:window.Server=MetadataApp({view:'locode',jsconfig:'eccn,inv:false'})?*/
</script>
<script src="../auth?callback=loadAuth&jsconfig=eccn"></script>

<script type="module">
import { useMetadata, useAuth } from "@servicestack/vue"
import { setFavIcon, setBodyClass } from "core"
import { humanify } from "@servicestack/client"

const { loadMetadata } = useMetadata()
const { signIn, toAuth } = useAuth()

globalThis.AUTH = toAuth(globalThis.AUTH)
loadMetadata()
signIn(globalThis.AUTH)
setBodyClass({ auth:globalThis.AUTH })

document.title = globalThis.Server.app.serviceName
setFavIcon(globalThis.Server.ui.brandIcon, globalThis.Server.app.baseUrl + '/metadata/svg/servicestack.datauri')

window.config = {
    sidebar: {
        /** @param {MetadataOperationType} op */
        label(op) {
            return humanify(op.dataModel.name)
        }
    }
}
</script>

<script>
/*files:js/*.js */
</script>
<!--components:Brand-->
<!--module:components/*.mjs-->
<!--file:custom.html-->

<script type="module">
import { ref, computed, nextTick, inject, onMounted } from "vue"
import { $1, $$ } from "@servicestack/client"
import { app } from "app"

const App = {
    template: $1('#app-template'),
    setup(props) {
        const app = inject('app')
        const store = inject('store')
        const routes = inject('routes')
        const server = inject('server')
        
        const showSidebar = ref(true)
        
        const grid = ref()
        let sub = null
        let lastOp = null
        
        onMounted(() => {
            sub = app.events.subscribe('route:nav', args => {
                // need to refresh to update when navigating to the same op/page 
                if (args.op && args.op === lastOp) {
                    // console.log('route:nav', JSON.stringify(args))
                    grid.value?.update()
                }
                lastOp = args.op
            })
        })

        const canAccessCrudEvents = computed(() => 
            server.plugins.autoQuery.crudEventsServices && store.hasRole(server.plugins.autoQuery.accessRole)) 
        
        return { app, store, routes, grid, showSidebar, canAccessCrudEvents }
    }
}

app.build(App).mount('#app')
app.start()

function styleProperty(name) {
    return document.documentElement.style.getPropertyValue(name)
}
function setStyleProperty(props) {
    let style = document.documentElement.style
    Object.keys(props).forEach(name => style.setProperty(name, props[name]))
}

let sidebarWidth = styleProperty('--sidebar-width')

nextTick(() => {
    document.body.classList.remove('loading')
    let max = Math.max(...Array.from($$('#sidebar .nav-item')).map(el => el.clientWidth))
    if (max > (240 - 75)) {
       sidebarWidth = (max + 75) + 'px'
       setStyleProperty({ '--sidebar-width': sidebarWidth })
    }
})
</script>
<script>
/*file:custom.js */
</script>

<!--shared:custom-end-->
</body>
</html>
